<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 公共头部片段 -->
    <style>
        #floatWindow img{
            width:60px;
            height:60px;
            /*图片大小缩放*/
            object-fit: contain;
            /*图片缩放后不裁剪*/
            border-radius: 10px;
            /*图片圆角*/
            margin-right: 10px;
        }
    </style>

</head>

<body>
<header th:replace="common/top"></header>
<!-- 欢迎信息 -->
<div id="Welcome">
    <div id="WelcomeContent" th:if="${session.loginAccount}">
        欢迎，<span th:text="${session.loginAccount.firstname}"></span>！
    </div>
</div>

<!-- 主内容区域 -->
<div id="Main">
    <!-- 背景视频 -->
    <video autoplay loop muted playsinline id="background-video">
        <source th:src="@{/images/main_bg.mp4}" type="video/mp4">
    </video>

    <!-- 主内容容器 -->
    <div id="MainContent">
        <!-- 侧边栏 -->
        <div id="Sidebar">
            <div id="SidebarContent">
                <a th:href="@{/categoryForm(categoryId='FISH')}">
                    <img th:src="@{/images/fish_icon.gif}"/><br/>
                    Saltwater, Freshwater
                </a>
                <br/>
                <a th:href="@{/categoryForm(categoryId='DOGS')}">
                    <img th:src="@{/images/dogs_icon.gif}"/><br/>
                    Various Breeds
                </a>
                <br/>
                <a th:href="@{/categoryForm(categoryId='CATS')}">
                    <img th:src="@{/images/cats_icon.gif}"/><br/>
                    Various Breeds, Exotic Varieties
                </a>
                <br/>
                <a th:href="@{/categoryForm(categoryId='REPTILES')}">
                    <img th:src="@{/images/reptiles_icon.gif}"/><br/>
                    Lizards, Turtles, Snakes
                </a>
                <br/>
                <a th:href="@{/categoryForm(categoryId='BIRDS')}">
                    <img th:src="@{/images/birds_icon.gif}"/><br/>
                    Exotic Varieties
                </a>
            </div>
        </div>

        <!-- 主图像 -->
        <div id="MainImage">
            <div id="MainImageContent">
                <map name="estoremap">
                    <area alt="Birds" coords="72,2,280,250"
                          th:href="@{/categoryForm(categoryId='BIRDS')}" shape="rect"
                          onmouseover="showInfo(event, 'BIRDS')" onmouseout="hideInfo()"/>
                    <area alt="Fish" coords="2,180,72,250"
                          th:href="@{/categoryForm(categoryId='FISH')}" shape="rect"
                          onmouseover="showInfo(event, 'FISH')" onmouseout="hideInfo()"/>
                    <area alt="Dogs" coords="60,250,130,320"
                          th:href="@{/categoryForm(categoryId='DOGS')}" shape="rect"
                          onmouseover="showInfo(event, 'DOGS')" onmouseout="hideInfo()"/>
                    <area alt="Reptiles" coords="140,270,210,340"
                          th:href="@{/categoryForm(categoryId='REPTILES')}" shape="rect"
                          onmouseover="showInfo(event, 'REPTILES')" onmouseout="hideInfo()"/>
                    <area alt="Cats" coords="225,240,295,310"
                          th:href="@{/categoryForm(categoryId='CATS')}" shape="rect"
                          onmouseover="showInfo(event, 'CATS')" onmouseout="hideInfo()"/>
                    <area alt="Birds" coords="280,180,350,250"
                          th:href="@{/categoryForm(categoryId='BIRDS')}" shape="rect"
                          onmouseover="showInfo(event, 'BIRDS')" onmouseout="hideInfo()"/>
                </map>
                <img height="355" th:src="@{/images/splash.gif}" align="middle"
                     usemap="#estoremap" width="350"/>
            </div>
        </div>

        <!-- 分隔线 -->
        <div id="Separator">&nbsp;</div>
    </div>
</div>

<!-- 公共底部片段 -->
<div th:replace="common/bottom"></div>

<!-- 浮动窗口 -->
<div id="floatWindow" style="position: fixed; display: none; background-color: white; border: 1px solid #ccc; padding: 10px; z-index: 1000;">
    Loading...
</div>

<!-- 静态资源 -->
<script th:src="@{/js/floatWindow.js}"></script>
<link rel="stylesheet" th:href="@{/css/floatWindow.css}"/>
</body>
</html>